<template>
  <el-skeleton :rows="5" animated v-if="loading" />
  <el-empty v-else-if="!content" description="No content available" />
  <div class="text-recall-display" v-else>
    <div class="sentence-pair" v-for="(sentence, index) in content" :key="index"
      :class="{ active: index === currentIndex }">
      <div class="sentence-item chinese">
        <span class="text">{{ sentence.chinese }}</span>
      </div>
      <div class="sentence-item english" :class="{ playing: index === playingIndex }">
        <span class="text">{{ sentence.english }}</span>
        <el-button v-if="!isPlaying" class="sentence-play-btn" size="small" @click="$emit('play-sentence', index)">
          <el-icon v-if="!isPlaying" :size="24">
            <VideoPlay />
          </el-icon>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { ElSkeleton, ElEmpty, ElButton, ElIcon } from 'element-plus'
import { VideoPlay } from '@element-plus/icons-vue'

export default {
  name: 'TextRecallDisplay',
  components: {
    ElSkeleton,
    ElEmpty,
    ElButton,
    VideoPlay,
    ElIcon
  },
  props: {
    isPlaying: {
      type: Boolean,
      default: false
    },
    content: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    currentIndex: {
      type: Number,
      default: -1
    },
    playingIndex: {
      type: Number,
      default: -1
    }
  },
  emits: ['play-sentence']
}
</script>

<style scoped>
.text-recall-display {
  margin: 10px 0;
}

.sentence-pair {
  display: flex;
  border-bottom: 1px solid #eee;
  padding: 5px 0;
}

.sentence-pair.active {
  background-color: #e8f4f8;
  border-left: 4px solid #42b983;
}

.sentence-item {
  flex: 1;
  padding: 0 5px;
  display: flex;
  align-items: center;
}

.chinese {
  border-right: 1px solid #eee;
  font-family: 'fangsong';
}

.text {
  line-height: 1.5;
  flex: 1;
}

.english {
  font-family: 'DynaPuff', sans-serif;
  color: transparent;
  transition: color 0.3s ease;
}

.english.playing {
  color: inherit;
}

.sentence-play-btn {
  margin-left: 10px;
  border:none;
  background: none;
}
@media(max-width: 768px){
  .sentence-pair {
    padding: 15px 5px;
    flex-direction: column;
  }
}
</style>